
<template>
  <h1>所有库存药品信息</h1>
  <el-table
    :data="tableData"
    style="width: 100%; margin-top: 5%"
    :row-class-name="tableRowClassName"
  >
    <el-table-column prop="medid" label="药品ID" />
    <el-table-column prop="medname" label="药品名称" />
    <el-table-column prop="medprice" label="药品单价" />
    <el-table-column prop="mednumber" label="药品编号" />
    <el-table-column prop="medcompany" label="药品供应商" />
    <el-table-column prop="productiontime" label="生产时间" />
    <el-table-column prop="effectivetime" label="到期时间" />
    <!-- <el-table-column prop="address" label="Address" /> -->
  </el-table>
</template>
  
  <script lang="ts" setup>
  import service from "@/request"
import { onMounted, ref } from "vue"
interface Medicine {
  medid: string
  medname: string
  medprice: string
  mednumber: string
  medcompany: string
  productiontime: string
  effectivetime: string
}

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: Medicine
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}

onMounted(() => {
  getAppointments();
});

// 获取后端预约数据
const getAppointments = async () => {
  console.log("获取数据");
  try {
    const response = await service.get("/Medicine/AllMedicinesInfo");
    tableData.value = response.data;
    console.log(tableData.value);
  } catch (error) {
    console.error("获取预约信息失败：", error);
  }
};


var tableData= ref([

])
</script>
  
  <style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
  